<template>
	<view class="detail-container">
		<view class="df aic jcc detail-title">
			<text>菜市场台区</text>
		</view>
		<view class="detail-border">
			<up-tabs class="df jcsb" :list="list1" @click="click"></up-tabs>
		</view>
		<view class="df jcsb aic task-progress bb2f">
			<text>当前任务完成度：{{0/162}}</text>
			<view class="df aic  bsb">
				<img style="width:50rpx;height:50rpx" class="mr20" src="../../static/imgs/addbtn.png" alt="" />
				<img style="width:50rpx;height:50rpx" src="../../static/imgs/refresh.png" alt="" />
			</view>
		</view>
		<view class="bb2f af aic task-progress bsb pr">
			<input class="h100 search-ipt" placeholder="用户名/户号/电表条码/出厂编号" type="text" />
			<img class="pa" style="width:50rpx;height:50rpx;left: 20rpx;top: 26rpx;" src="../../static/imgs/search.png" alt="" />
			<img class="pa" style="width:50rpx;height:50rpx;right: 20rpx;top: 26rpx;" src="../../static/imgs/sm.png" alt="" />
		</view>
		<u-dropdown>
			<u-dropdown-item disabled title="用户"></u-dropdown-item>
			<u-dropdown-item v-model="detail_sort" title="排序" :options="detail_sort_data"></u-dropdown-item>
			<u-dropdown-item v-model="task_status" title="任务状态" :options="task_status_data"></u-dropdown-item>
			<u-dropdown-item v-model="data_status" title="数据状态" :options="data_status_data"></u-dropdown-item>
		</u-dropdown>
	</view>
	<view class="list-container df fdc bsb">
		<view @click="to_user_robot_detail" class="list-item df aic bb2f bsb p20">
			<text class="mr40">1</text>
			<view class="df fdc tal">
				<text>待换表</text>
				<text>户名：李秀英</text>
				<text>户号：0060061443</text>
				<text>旧表条码：--</text>
				<text>旧表编号：--</text>
				<text>新表条码：--</text>
				<text>新表编号：--</text>
				<text>已同步</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	const list1 = ref([
		{
			name: '台区用户'
		},
		{
			name: '台区计量箱'
		}
	]);
	const detail_sort = ref(1)
	const task_status = ref(1)
	const data_status = ref(1)
	const detail_sort_data = ref([
		{
			label:'默认',
			value:1
		},
		{
			label:'用户递减',
			value:2
		},
		{
			label:'用户递增',
			value:3
		}
	])
	const task_status_data = ref([
		{
			label:'全部',
			value:1
		},
		{
			label:'待换表',
			value:2
		},
		{
			label:'已换表',
			value:3
		},
		{
			label:'无需换表',
			value:4
		},
		{
			label:'待换模块',
			value:5
		},
		{
			label:'已换模块',
			value:6
		},
		{
			label:'无需换模块',
			value:7
		}
	])
	const data_status_data = ref([
		{
			label:'全部',
			value:1
		},
		{
			label:'已同步',
			value:2
		},
		{
			label:'待同步',
			value:3
		}
	])
	
	const to_user_robot_detail = ()=>{
		uni.redirectTo({
			url:'/pages/reloaderListDetail/reloaderListDetail'
		})
	}
</script>

<style scoped lang="scss">
	page {
		height: 100%;
	}

	.detail-title {
		height: 160rpx;
		background-color: #f5f8f7;
		color: #10151F;
	}

	:deep(.u-tabs__wrapper__nav__line) {
		width: 10% !important;
		// transform: translate(50%) !important;
	}

	:deep(.u-tabs__wrapper__nav) {
		display: flex !important;
		align-items: center !important;
		justify-content: space-around !important;
	}

	:deep(.u-dropdown__menu__item:first-child) {
		.u-dropdown__menu__item__arrow {
			display: none !important;
		}
	}

	:deep(.u-dropdown__menu__item__text) {
		color: #606266 !important;
	}

	.detail-container {
		box-shadow: 10rpx 10rpx 30rpx 10rpx rgba(0, 0, 0, .1);
	}

	.detail-border {
		border-bottom: 2rpx solid #F1F0F0;
	}

	:deep(.u-dropdown__menu__item:first-child) {
		width: 300rpx !important;
	}

	.task-progress {
		height: 100rpx;
		padding: 0 20rpx;
	}
	.search-ipt{
		padding-left: 80rpx;
	}
</style>